<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/homepage.css">
    <link rel="stylesheet" href="css/detail.css">
    <title>Document</title>
</head>
<body>
    <div class="header">
        <div class="first-nav">
            <div class=" first-left-nav">
                <ul>
                    <li><img src="img/home.png"     alt=""> 当前城市:</li>
                    <li><a href="">上海</a>
                    <!-- <span>
                        <p>
                            <u>xxxxx</u>
                            <table>
                                <tr>
                                    <td>xxxxxxxxx</td>
                                </tr>
                                <tr>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                </tr>
                            </table>
                        </p>
                        <p>
                            <table>
                                <tr>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                    <td><a href="">xxx</a></td>
                                </tr>
                            </table>
                        </p>
                    </span> -->
                    </li>
                    <li>hi，欢迎来到我买网！</li>
                    <li><a href="login.html">登录</a></li>
                    <li><a href="register.html">注册</a></li>
                </ul>
            </div>
            <div class=" first-right-nav">
                <ul>
                    <li><a href="">我的账户</a>
                        <!-- <span>
                            <p>
                                <table>
                                    <tr>
                                        <td>xxxxxxxxx</td>
                                    </tr>
                                    <tr>
                                        <td><a href="">xxx</a></td>
                                        <td><a href="">xxx</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">xxx</a></td>
                                        <td><a href="">xxx</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">xxx</a></td>
                                        <td><a href="">xxx</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">xxx</a></td>
                                        <td><a href="">xxx</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">xxx</a></td>
                                    </tr>
                                </table>
                                </p>
                        </span> -->
                    </li>
                    <li><a href="">购物车件</a></li>
                    <li><a href="">客户服务</a></li>
                    <li><a href="">企业购</a></li>
                    <li><a href=""><img src="img/icbc.png" alt=""></a></li>
                    <li><a href=""><img src="img/zx.png" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>




    <div class="search-wrap">
        <div class="search-box">
            <div class="search-img1">
                <img src="img/1.png" alt="">
            </div>
            <div class="search">
                <input type="text">
                <a href="">搜索</a>
            </div>
            
            <div class="search-img2">
                <a href=""><img src="img/erweima.png" alt=""></a>
            </div>
        </div>
    </div>
    <div class="xq-nav-wrap">
        <div class="xq-nav">
            <span>全部商品分类</span>
            <ul>
                <li><a href="homepage.html"> 首页</a></li>
                <li>团购</li>
            </ul>
            <div class="xq-gw"><a href="cart.html"><img src="img/3.png" alt="">购物车</a>
        </div>
    </div>
    </div>
    <div class="cont">
        <div class="imgbox"></div>
        <div class="infobox"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/fangdajing.js"></script>

    <script>
        let id = window.location.search.split("=")[1];
        let data = null;

    
        $.ajax({
            url:"data/pro.json",
            success:res=>{
                res = JSON.parse(res);
                data = res;
                let i = 0;
           
                render(data);
            }
        })
    
        let render = function(res){
            console.log(res)
            res.some((val,idx)=>{
                i = idx;
                return val.goodsId===id
            });
            
    
            // console.log(res[i])
            
            let imglist1="";
            for(var j=0;j<res[i].img.length;j++){
                imglist1 += `<li><img src="${res[i].img[j].small}" alt=""></li>`;
            }
    
            let imgbox = `<div class="smallImg">
                    <img src="${res[i].img[0].small}" alt="">
                    <span></span>
                </div>
                <div class="largeImg">
                    <img src="${res[i].img[0].large}" alt="">
                    </div>`;
    
            // let colorlist="";
            // for(var j=0;j<res[i].colors.length;j++){
            //     colorlist += `<li>
            //                     <span style="background:${res[i].colors[j].color}"></span>
            //                     <em>${res[i].colors[j].title}</em>
            //                 </li>`;
            // }
            let infobox = `<h2>${res[i].name}</h2>
                    <ul class="goodstp">
                        ${imglist1}
                    </ul>
                <p>价格：<span>${res[i].price}</span></p>
                <p>销量：<span>${res[i].sales}</span></p>
                <p>剩余：<span>${res[i].stock - res[i].sales}</span></p>
                <u class="add">加入购物车</u>`;
              
    
    
            $(".imgbox").html(imgbox);
            $(".infobox").html(infobox);
    
            
            // 添加放大镜功能
            new Magnifier();
            
            // 添加点击切换图片功能
            
            // 添加购物车功能
            $(".add").on("click",function(){
                console.log(2222);
                let proMsg = localStorage.getItem("proMsg") ? JSON.parse(localStorage.getItem("proMsg")) : [];
        
                let index=0;
                data.some((val,idx)=>{
                    index = idx;
                    return val.goodsId === id;
                });
        
                if(proMsg.length >= 1){
                    let flag = false;
                    let i;
                    for(i=0;i<proMsg.length;i++){
                        if(proMsg[i].id === id){
                            flag = true;
                            break;
                        }
                    }
                    if(flag){
                        proMsg[i].num++;
                    }else{
                        proMsg.push({
                            id,
                            num:1,
                            price:res[index].price
                        })
                    }
                }else{
                    proMsg.push({
                        id,
                        num:1,
                        price:res[index].price
                    })
                }
                localStorage.setItem("proMsg",JSON.stringify(proMsg));
            })
        //     $(".addgoods").click(function(res){
        //         $.ajax({
        //                 url:"http://localhost:3000/api",
        //                 data:{
        //                 
        //              },
        //         success:(res)=>{
        //         // console.log(res);
        //         res = JSON.parse(res);
              
        //     },
        //     type:"post"
        // })
        //                 })
    }
    
    </script>
</body>
</html>